<template>
  <div class="content-wraper">
    <div class="search-box">
      <el-form label-width="100px" :inline="true">
        <el-form-item label="项目名称">
          <el-input v-model="projectName" />
        </el-form-item>
        <el-form-item label="年份" prop="year">
          <el-date-picker
            v-model="year"
            type="year"
            value-format="yyyy"
            style="width: 100%"
            placeholder="选择年"
          />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="reset()">重置</el-button>
      </el-form>
    </div>
    <div class="detail">
      <com-table :data="dataList" :columns="columns" :total="total" @pageChange="pageChange">
        <template v-slot:options="{row}">
          <el-button type="success" icon="el-icon-edit-outline" size="mini" @click="displayChart(row)">详情</el-button>
        </template>
        <template v-slot:biBidStartTime="{row: {biBidStartTime}}">
          {{ dateFormat(biBidStartTime) }}
        </template>
      </com-table>
    </div>
    <proFundScheduleChart
      :visible="showChart"
      :chart-data="chartData"
      @cancel="showChart = false"
    />
  </div>
</template>

<script>
import { getProjectMoneyPlanList } from '@/api/bigManage'
import moment from 'moment'
import { getDictName } from '@/utils/comm'
import { bidInfoMode, bidInfoType, workflowStatus } from '@/utils/dicData'
import proFundScheduleChart from './components/proFundScheduleChart.vue'
export default {
  name: 'BidInfo',
  components: {
    proFundScheduleChart
  },
  data() {
    return {
      showChart: false,
      chartData: {},
      projectName: '',
      year: '',
      getDictName,
      bidInfoMode,
      bidInfoType,
      workflowStatus,
      getProjectMoneyPlanList,
      dataList: [],
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      showModal: false,
      optType: 'add',
      unitDetail: {},
      columns: [
        {
          label: '项目名称',
          prop: 'projectName',
          width: '200'
        },
        {
          label: '1月累计收款',
          prop: 'cumulativeCollection1',
          width: '120'
        },
        {
          label: '1月累计支付',
          prop: 'cumulativePayment1',
          width: '120'
        },
        {
          label: '2月累计收款',
          prop: 'cumulativeCollection2',
          width: '120'
        },
        {
          label: '2月累计支付',
          prop: 'cumulativePayment2',
          width: '120'
        },
        {
          label: '3月累计收款',
          prop: 'cumulativeCollection3',
          width: '120'
        },
        {
          label: '3月累计支付',
          prop: 'cumulativePayment3',
          width: '120'
        },
        {
          label: '4月累计收款',
          prop: 'cumulativeCollection4',
          width: '120'
        },
        {
          label: '4月累计支付',
          prop: 'cumulativePayment4',
          width: '120'
        },
        {
          label: '5月累计收款',
          prop: 'cumulativeCollection5',
          width: '120'
        },
        {
          label: '5月累计支付',
          prop: 'cumulativePayment5',
          width: '120'
        },
        {
          label: '6月累计收款',
          prop: 'cumulativeCollection6',
          width: '120'
        },
        {
          label: '6月累计支付',
          prop: 'cumulativePayment6',
          width: '120'
        },
        {
          label: '7月累计收款',
          prop: 'cumulativeCollection7',
          width: '120'
        },
        {
          label: '7月累计支付',
          prop: 'cumulativePayment7',
          width: '120'
        },
        {
          label: '8月累计收款',
          prop: 'cumulativeCollection8',
          width: '120'
        },
        {
          label: '8月累计支付',
          prop: 'cumulativePayment8',
          width: '120'
        },
        {
          label: '9月累计收款',
          prop: 'cumulativeCollection9',
          width: '120'
        },
        {
          label: '9月累计支付',
          prop: 'cumulativePayment9',
          width: '120'
        },
        {
          label: '10月累计收款',
          prop: 'cumulativeCollection10',
          width: '120'
        },
        {
          label: '10月累计支付',
          prop: 'cumulativePayment10',
          width: '120'
        },
        {
          label: '11月累计收款',
          prop: 'cumulativeCollection11',
          width: '120'
        },
        {
          label: '11月累计支付',
          prop: 'cumulativePayment11',
          width: '120'
        },
        {
          label: '12月累计收款',
          prop: 'cumulativeCollection12',
          width: '120'
        },
        {
          label: '12月累计支付',
          prop: 'cumulativePayment12',
          width: '120'
        },
        {
          fixed: 'right',
          label: '操作',
          width: '100',
          prop: 'options',
          slot: 'options'
        }
      ]
    }
  },
  created() {
    this.defaultTime()
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    displayChart(row) {
      const xdata = []
      const adata = []
      const bdata = []
      for (let i = 1; i <= 12; i++) {
        xdata.push(i + '月')
      }
      for (let i = 1; i <= 12; i++) {
        adata.push(row[`cumulativePayment${i}`])
      }
      for (let i = 1; i <= 12; i++) {
        bdata.push(row[`cumulativeCollection${i}`])
      }
      this.chartData = {
        legend: row.projectName + '项目资金统计表',
        xdata: xdata,
        adata: adata,
        bdata: bdata
      }
      this.showChart = true
    },
    defaultTime() {
      this.year = moment(new Date()).format('YYYY')
    },
    dateFormat(data) {
      if (data) {
        return moment(data).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.pageParams,
        projectName: this.projectName,
        year: this.year
      }
      getProjectMoneyPlanList(params).then((res) => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.total = total - 0
        }
      })
    },
    search() {
      this.pageParams.pageNum = 1
      this.getDataList()
    },
    reset() {
      this.projectName = ''
      this.defaultTime()
    }

  }
}
</script>

<style lang="scss" scoped>
.search-box {
  height: 50px;
}
.detail{
  height: calc(100% - 50px);
}
</style>
